<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>

    <div id="example-4">
        <button @click="show = !show">
          Toggle
        </button>
        <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false">
            <p v-if="show">
                Demo
            </p>
        </transition>
    </div>



</body>
<script>
    new Vue({
        el: '#example-4',
        data: {
            show: false
        },
        methods: {
            beforeEnter: function(el) {
                el.style.opacity = 0
                el.style.transformOrigin = 'left'
            },
            enter: function(el, done) {
                Velocity(el, {
                    opacity: 1,
                    fontSize: '1.4em'
                }, {
                    duration: 300
                })
                Velocity(el, {
                    fontSize: '1em'
                }, {
                    complete: done
                })
            },
            leave: function(el, done) {
                Velocity(el, {
                    translateX: '15px',
                    rotateZ: '50deg'
                }, {
                    duration: 600
                })
                Velocity(el, {
                    rotateZ: '100deg'
                }, {
                    loop: 2
                })
                Velocity(el, {
                    rotateZ: '45deg',
                    translateY: '30px',
                    translateX: '30px',
                    opacity: 0
                }, {
                    complete: done
                })
            }
        }
    })
</script>

</html>